<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录注册</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        ul {
            list-style: none;
        }

        .head_title {
            width: 60px;
            height: 60px;
        }

        .dropdown {
            float: right;
        }

        nav {
            margin-bottom: 0px;
        }

        .remindTitle {
            color: #f00;
        }

        .loginBody {
            border-top: 1px solid #ccc;
        }

        .loginRight,
        .loginLeft,
        .loginloginTitl {
            float: left;
        }

        #tablebottm {
            border-bottom: 1px solid #ccc;
        }

        .loginRight {
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
        }
        #login{
            text-align: center;
            padding-left: 80px;
            padding-top: 40px;
        }
        input{
            margin-top: 40px;
           display: block;
        }
    </style>
    <script>
        $(function () {
            var vm1 = new Vue({
                el: "#loginBodyTitle",
                data: {
                    comType: 1,
                    user:{userId:'',userName:'',userPassword:''},
                    users:[]
                },
                methods:{
                    login(){
                        alert("start")
                        for(var i = 0 ; i < this.users.length ; i++){
                            if(this.users[i].userId == this.user.userId
                            && this.users[i].userName == this.user.userName
                            && this.users[i].userPassword == this.user.userPassword ){
                                alert('登录成功')
                                localStorage.setItem('currentLogin',JSON.stringify(this.user))
                                location.href = 'HomePage.html'
                                return
                            }
                        }
                        alert("登录失败")
                    },
                    regieter(){
                        this.users.push(this.user)
                        localStorage.setItem('user',JSON.stringify(this.users))
                        alert('注册成功')
                        this.user={}
                    }
                },
                mounted(){
                    if(localStorage.getItem('users')){
                        this.users = JSON.parse(localStorage.getItem('user'))
                    }
                }
            })
            
        })
    </script>
</head>

<body>
    <!-- 1.顶部导航栏 -->
    <nav class="navbar">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar"
                    aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <img src="images/bookTitle.png" alt="" class="head_title">
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">书海文学网 <span class="sr-only">(current)</span></a></li>
                    <li><a href="HomePage.html">首页</a></li>
                    <!-- <li><a href="mainPage.html">主页</a></li> -->
                    <!-- <li><a href="bookcase.html">书架</a></li> -->
                    <li><a href="SeaofBook.html" target="_blank">书海</a></li>
                </ul>
                <!-- 右侧输出 -->
                <ul class="nav navbar-nav navbar-right hidden-sm">
                    <li><a href="#" class="remindTitle">当前为注册登录页面</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="loginBody">
        <div class="loginLeft"><img src="https://sta.gtimg.com/qd6/images/loginBg.jpg" alt=""></div>
        <div class="loginRight" style="background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583397966687&di=5957868f31577ff068839741caac356c&imgtype=0&src=http%3A%2F%2Fimg2.ctoutiao.com%2Fuploads%2F2017%2F08%2F17%2F1502951682867859.jpg);">
            <!-- vue组件实现功能切换 -->
            <div id="loginBodyTitle">
                <table id="tablebottm">
                    <tr>
                        <td class="col-xs-3 col-xs-offset-3"><button @click="comType=1">登录</button></td>
                        <td class="col-xs-3 col-xs-offset-3"><button @click="comType=2">注册</button></td>
                    </tr>
                </table>
                <div id="login" v-if="comType==1">
                    <input type="text" placeholder="请输入用户账号：" v-model="user.userId">
                    <input type="text" placeholder="输入用户呢称：" v-model="user.userName">
                    <input type="password" placeholder="请输入密码：" v-model="user.userPassword">
                    <input type="button" value="登录" @click="login">
                </div>
                <div id="login" v-else-if="comType==2">
                    <input type="text" placeholder="注册用户账号：" v-model="user.userId">
                    <input type="text" placeholder="输入用户呢称：" v-model="user.userName">
                    <input type="password" placeholder="密码：" v-model="user.userPassword">
                    <input type="button" value="注册" @click="regieter">
                </div>

                
        </div>
    </div>

</body>

</html>